<template>
	<view class="container">
		<view class="tips_box">说明：将会优先派单给期望陪宠师，期望陪宠师无法接单时将会派单给其他人。</view>
		<view class="content">
			<template v-if="petTeacherData.list.length > 0">
				<view class="card_box" @tap="selectPetTeacher(item)" v-for="(item,index) in petTeacherData.list"
					:key="item.id">
					<image class="pet_teacher_img" :src="item.avatar"></image>
					<view class="pet_teacher_info">
						<view class="pet_teacher_info_top">
							<view class="pet_teacher_info_top_text">
								<view class="pet_teacher_info_nikcNmae">
									<text>{{item.nickName}}</text>
									<image :src="item.sex == 0 ? `${iconUrl}36.png`: `${iconUrl}35.png`" mode="">
									</image>
								</view>
								<view class="pet_teacher_info_name">{{item.realName}} | {{item.age}}岁 | {{item.phone}}
								</view>
							</view>
							<image class="pet_teacher_info_top_btn"
								:src="item.isSelect ? `${iconUrl}13.png`: `${iconUrl}12.png`" mode=""></image>
						</view>
						<view class="pet_teacher_info_bottom" v-if="item.petsitterIntroduce != ''">
							{{item.petsitterIntroduce}}
						</view>
					</view>
				</view>
			</template>
			<view class="not_box" v-if="petTeacherData.list.length < 0 && isShowBlack">暂无可选择的陪宠师</view>
		</view>
		<view class="foot_btn_box">
			<view class="foot_btn" @tap="submit">确定</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, onMounted, computed, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import api from '@/api'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { useOrderStoreToRefs } from "@/store/useOrderStore"
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const { petTeacherInfo } = useOrderStoreToRefs()
	onLoad(async (options) => {
		/* options.studioId
		 options.serviceType */
		await getpetTeacher(options.studioId, options.serviceType)
	})
	onShow(() => {
		//getpetTeacher()
	})
	const petTeacherItem = ref({})
	const studioId = ref('')
	const serviceType = ref('')
	const petTeacherData = reactive({
		list: [],
		loading: 'more'
	})
	const isShowBlack = ref(false)
	const getpetTeacher = async (studioId, serviceType) => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		petTeacherData.loading = 'loading'
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/petsitter-team/getTeamListV2`,
			data: { studioId, serviceType }
		})
		if (res.data) {
			petTeacherData.list = res.data || []
			isShowBlack.value = res.data.length > 0 ? false : true
			petTeacherData.list.forEach(item => {
				if (item.id == petTeacherInfo.value.id) {
					item.isSelect = true
				} else {
					item.isSelect = false
				}

			})
		} else {
			isShowBlack.value = true
		}
		uni.hideLoading()
	}
	const selectPetTeacher = (val) => {
		petTeacherData.list.forEach(item => {
			if (item.id == val.id) {
				item.isSelect = true
			} else {
				item.isSelect = false
			}
		})
		petTeacherItem.value = val

	}
	const submit = () => {
		petTeacherInfo.value = petTeacherItem.value
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100%;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		background-color: #F9F6F6;
	}

	.tips_box {
		margin: 0 auto;
		padding: 32rpx 0;
		width: 686rpx;
		font-size: 26rpx;
		color: #7C807F;
		line-height: 1.4;
	}

	.content {
		margin: 0 auto;
		width: 686rpx;

		.not_box {
			border-radius: 24rpx;
			background-color: #fff;
			height: 800rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.card_box {
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 24rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;

			.pet_teacher_img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.pet_teacher_info {
				width: 510rpx;

				.pet_teacher_info_top {
					display: flex;
					justify-content: space-between;

					.pet_teacher_info_top_text {
						margin-top: 8rpx;
						line-height: 1;

						.pet_teacher_info_nikcNmae {

							margin-bottom: 16rpx;
							display: flex;
							align-items: center;

							text {
								font-size: 32rpx;
								color: #1B2120;
								font-weight: bold;
							}

							image {
								margin-left: 16rpx;
								width: 36rpx;
								height: 36rpx;
							}
						}

						.pet_teacher_info_name {
							font-size: 26rpx;
							color: #7C807F;

						}
					}

					.pet_teacher_info_top_btn {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.pet_teacher_info_bottom {
					margin-top: 24rpx;
					color: #7C807F;
					font-size: 26rpx;
					line-height: 1.4;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 限制显示的行数为2 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.foot_btn_box {
		line-height: 1;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-top: 8rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		display: flex;
		justify-content: center;
		border-top: 1rpx solid #E4E6E6;

		.foot_btn {
			width: 686rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 62rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
			color: #fff;
		}
	}
</style>